<template>
    <div id="app" class="app">
        <h1>{{ msg }},学生的名字：{{ studentName }}</h1>
        <!-- 通过父组件给子组件传递 props 形式实现值传递：子给父传递数据-->
        <School :getSchoolName=" getSchoolName"/>
        <hr/>
        <!--第一种方法：使用@或者v-on-->
        <!--        @ceshi="m1"-->
        <!--        <Student @defineMethod="demo"/>-->
        <!-- 第二种方法:灵活性更加高点-->
        <Student ref="student" @click.native="m1"/>

    </div>
</template>

<script>
    import Student from "@/components/Student.vue";
    import School from "@/components/School.vue";

    export default {
        name: "App",
        components: {
            Student,
            School
        },
        data() {
            return {
                msg: "欢迎学习Vue",
                studentName: ''
            };
        },
        methods: {
            getSchoolName(name) {
                alert(name);
            },
            demo(value, ...params) {
                this.studentName = value;
                console.log('自定义事件被触发了，调用了', value, params);
            },
            m1() {
                console.log('m1被调用触发了')
                alert(1111)
            }
        },
        mounted() {
            //  灵活性更加高点
            //  setTimeout(() => {
            //  这个也是处理的一个方法,要写成箭头函数才能引用this
            /*this.$refs.student.$on('defineMethod', (value, ...params) => {
                this.studentName = value;
                console.log('自定义事件被触发了，调用了', value, params, this);
            })*/
            this.$refs.student.$on('defineMethod', this.demo)
            // }, 3000)
        }
    };
</script>

<style>
    .app {
        background-color: gray;
        padding: 5px;
    }
</style>

